<template>
  <el-form-item :rules="item.rule" :label="item.label" :prop="item.prop">
    <div class="mix">
      <div class="valueRange">
        <el-date-picker
          v-model="formData[item.prop][0]"
          :format="item.format"
          :type="item.dateType"
          :disabled="item.disabled"
          :value-format="item.valueFormat"
          :placeholder="
            item.startPlaceholder === undefined
              ? '开始日期'
              : item.startPlaceholder
          "
          :default-time="item.defaultTime"
          :picker-options="startPickerOptions"
          :clearable="item.clearable === undefined ? true : item.clearable"
          :editable="item.editable === undefined ? true : item.editable"
          @change="changer"
          unlink-panels
        ></el-date-picker>
      </div>
      <div class="valueRange valueRange-middle">
        {{ item.rangeSeparator === undefined ? "至" : item.rangeSeparator }}
      </div>
      <div class="valueRange">
        <el-date-picker
          v-model="formData[item.prop][1]"
          :format="item.format"
          :disabled="item.disabled"
          :type="item.dateType"
          :value-format="item.valueFormat"
          :placeholder="
            item.endPlaceholder === undefined ? '结束日期' : item.endPlaceholder
          "
          :default-time="item.defaultTime"
          :picker-options="endPickerOptions"
          :clearable="item.clearable === undefined ? true : item.clearable"
          :editable="item.editable === undefined ? true : item.editable"
          @change="changer"
          unlink-panels
        ></el-date-picker>
      </div>
      <span class="el-input__suffix-inner">
        <i class="el-input__icon el-icon-date icon_end_fix"></i>
      </span>
    </div>
  </el-form-item>
</template>

<script>
import moment from "moment";
import _ from "lodash";

export default {
  name: "dateRangeSingleCom",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    let self = this;
    return {
      startPickerOptions: {
        disabledDate: time => {
          let m;
          if (this.item.pickerOptions) {
            const temp = this.formData[this.item.prop][1];
            const a1 =
              moment(time).isBefore(moment(this.item.pickerOptions[0])) ||
              moment(time).isAfter(moment(temp));
            const a2 =
              moment(time).isBefore(moment(this.item.pickerOptions[0])) ||
              moment(time).isAfter(moment(this.item.pickerOptions[1]));
            if (temp) {
              return a1;
            } else {
              return a2;
            }
          } else if (
            self.formData &&
            self.item.prop &&
            self.formData[self.item.prop] &&
            self.formData[self.item.prop][1]
          ) {
            m = moment(self.formData[self.item.prop][1]);
            return moment(time).isAfter(moment(m));
          } else {
            return false;
          }
        }
      },
      endPickerOptions: {
        disabledDate: time => {
          let m;
          if (this.item.pickerOptions) {
            const temp = this.formData[this.item.prop][0];
            const a1 =
              moment(time).isBefore(moment(this.formData[this.item.prop][0])) ||
              moment(time).isAfter(moment(this.item.pickerOptions[1]));
            const a2 =
              moment(time).isBefore(moment(this.item.pickerOptions[0])) ||
              moment(time).isAfter(moment(this.item.pickerOptions[1]));
            if (temp) {
              return a1;
            } else {
              return a2;
            }
          } else if (
            self.formData &&
            self.item.prop &&
            self.formData[self.item.prop] &&
            self.formData[self.item.prop][0]
          ) {
            m = moment(self.formData[self.item.prop][0]);
            return moment(time).isBefore(moment(m));
          } else {
            return false;
          }
        }
      }
    };
  },
  methods: {
    changer() {
      if (this.item.change) {
        this.item.change(
          this.formData[this.item.prop][0],
          this.formData[this.item.prop][1]
        );
      }
    }
  },
  created() {
    if (this.item.dateType === "date") {
      this.startPickerOptions.shortcuts = this.endPickerOptions.shortcuts = [
        {
          text: "今天",
          onClick(picker) {
            picker.$emit("pick", new Date());
          }
        },
        {
          text: "昨天",
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit("pick", date);
          }
        },
        {
          text: "一周前",
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit("pick", date);
          }
        }
      ];
    }
  },
  mounted() {
    if (this.item.startPickerOptions) {
      this.startPickerOptions = this.item.startPickerOptions;
    }
    if (this.item.endPickerOptions) {
      this.endPickerOptions = this.item.endPickerOptions;
    }
  }
};
</script>

<style scoped lang="scss">
.icon_end_fix {
  color: #c0c4cc;
  position: absolute;
  right: 0;
  top: 0;
}

.mix {
  display: flex;
  border-radius: 2px;
  border: 1px solid #cecece;
  padding-right: 30px;
  width: 100%;
}

.mix .valueRange:nth-child(1) {
  padding-right: 0 !important;
  width: calc((100% - 20px) / 2);
}

.mix .valueRange:nth-child(2) {
  padding-left: 3px !important;
  padding-right: 0 !important;
  width: 20px;
}

.mix .valueRange:nth-child(3) {
  padding-left: 0 !important;
  width: calc((100% - 20px) / 2);
}

::v-deep .el-input__inner {
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: center !important;
}

::v-deep .el-date-editor > .el-input__suffix {
  right: -10px !important;
}
::v-deep.el-form-item.is-error .mix {
  border-color: #f56c6c;
}
</style>
